2022

您所在的位置：网站首页 › react router dom 封装 › 2022

2022

2023-11-08 01:16| 来源: 网络整理| 查看: 265

react-router-dom升级到V6之后API上还是有很多不同的今天就使用vite+react-ts初始化项目，尝试一下 vite地址：https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project react-router-dom地址：https://reactrouter.com/docs/en/v6/getting-started/installation Antd地址：https://ant.design/components/layout-cn/

用到的路由API有： BrowserRouter、useRoutes、RouteObject、Link、useSearchParams、useParams、matchRoutes、Outlet、useLocation、useNavigate

开始首先初始化项目

yarn create vite react-dom-6 --template react-ts

这样我们就使用vite脚手架初始化了一个react+ts的项目进入到我们的项目里面

cd react-dom-6

接下来，把我们所需要的依赖安装一下

yarn yarn add react-router-dom@6 antd --save

完事版本和目录就是这样的

image.png

启动我们项目

yarn dev // or: npm run dev

在浏览器打开网址 http://localhost:3000/

image.png 接下来把一些不必要的文件可以删除一下 image.png

App.css清空，然后把antd的css样式引入

@import "antd/dist/antd.css"

创建我们自己的页面在src目录下，创建pages文件夹，用来存放我们自己的组件在src目录下，创建routers文件夹，用来同意管理路由组件

在routers文件夹创建路有组件index.tsx import { lazy, ReactNode, Suspense } from 'react' import { RouteObject } from 'react-router-dom' // import AppLayout from '../AppLayout' // import Detail from '../Detail' // import Home from '../Home' // import Login from '../Login' // import User from '../User' // 用懒加载实现优化 // const AppLayout = lazy(() => import('../AppLayout')); const Detail = lazy(() => import('../Detail')); const Home = lazy(() => import('../Home')); const Login = lazy(() => import('../Login')); const User = lazy(() => import('../User')); // 切换页面会出现闪屏现象 // 解决思路：公共页面不采用懒加载的方式并在App.tsx去除Suspense的包裹 import AppLayout from '../AppLayout'; // 实现懒加载的用Suspense包裹定义函数 const lazyLoad = (children: ReactNode): ReactNode =>{ return {children} } export const routers: RouteObject[] = [ { path: '/', element: , //路由嵌套，子路由的元素需使用 children: [ { index: true, element: lazyLoad() }, { path: '/user/list', element: lazyLoad() }, { path: '/user/detail/:id', element: lazyLoad() } ] }, { path: '/login', element: lazyLoad() } ] main.tsx 组件 import ReactDOM from 'react-dom' import {BrowserRouter as Router} from "react-router-dom" import App from './App' ReactDOM.render( , document.getElementById('root')) App.tsx 组件 useRoutes: 返回与当前位置匹配的路由元素，参数就是创建的路由对象 import { useRoutes } from 'react-router-dom'; import './App.css'; import { routers } from './pages/router' function App() { return useRoutes(routers); } export default App;

依次看一下路由对应组件里面的内容

AppLayout.jsx 组件 matchRoutes: 将给定路由匹配到某个位置并返回匹配数据。 Outlet: 渲染子路由的元素（如果有） useLocation: 返回当前位置对象，该对象表示web中的当前URL Link：用作链接跳转，会渲染成a标签 import { Layout, Menu, Breadcrumb } from 'antd'; import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons'; import { Link, matchRoutes, Outlet, useLocation } from 'react-router-dom'; import { useEffect, useState } from 'react'; import { routers } from './router'; const { SubMenu } = Menu; const { Header, Content, Sider } = Layout; export default function AppLayout() { const location = useLocation(); const [defaultSelectedKeys, setDefaultSelectedKeys] = useState([]); const [defaultOpenKeys, setDefaultOpenKeys] = useState([]); const [isInit, setIsInit] = useState(false) useEffect(() => { const routes = matchRoutes(routers, location.pathname); // 返回匹配到的路由数组对象，每一个对象都是一个路由对象 const pathArr: string[] = []; if(routes !== null) { routes.forEach((item) => { const path = item.route.path; if(path) { pathArr.push(path); } }) } setDefaultSelectedKeys(pathArr); setDefaultOpenKeys(pathArr); setIsInit(true); }, [location.pathname]); if(!isInit) { return null; } return ( nav 1 nav 2 nav 3 用户信息 option2 option3 option4 option5 option6 option7 option8 Home List App ) } User.tsx 组件 useSearchParams: 一个语法糖，用于通过URLSearchParams接口读取和写入搜索参数。 URLSearchParams有get、getAll、has、set、sort、toString等方法用来获取URL传递的参数 import React from 'react' import { Link, useSearchParams } from 'react-router-dom' export default function User() { const [params, _] = useSearchParams(); console.log(params.get("qq")); // 获取参数 return ( 用户1 用户2 用户3 用户4 ) } Detail.tsx 组件 useParams: 从当前参数返回动态参数的键/值对的对象与路由路径匹配的URL import { useParams } from 'react-router-dom' export default function Detail() { const params = useParams(); return ( user Detail-- {params.id} ) }

下面就是Login登陆组件了

import { useNavigate } from 'react-router-dom'; import { Button } from 'antd'; export default funciton Login() { const navigate = useNavigate(); funciton clickToUser() { navigate('/'); }; return 登陆 }

差不多就是这个样子，完事之后是这个样子的

image.png 点击用户 image.png

就没了，有兴趣的同学可以尝试一下@～@

【本文地址】

2022

2022

今日新闻

推荐新闻